<template>
  <div class="container-content">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
    >
      <el-form-item
        label-width="200px"
        label="存货成本类别"
        prop="costCategory"
      >
        <el-input
          v-model="formData.costCategory"
          placeholder="请输入存货成本类别"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item>
      <!-- <el-form-item label-width="200px" label="编码" prop="feeCode">
        <el-input
          v-model="formData.feeCode"
          placeholder="请输入编码"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input>
      </el-form-item> -->
      <el-form-item label-width="200px" label="税率" prop="taxRate">
        <el-input
          v-model="formData.taxRate"
          placeholder="请输入税率"
          clearable
          :style="{ width: '100%' }"
        >
          <i
            slot="suffix"
            @click="openList('税率')"
            class="el-input__icon el-icon-notebook-2"
            style="cursor: pointer"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="名称" prop="title">
        <el-input
          v-model="formData.title"
          placeholder="请输入名称"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>

      <el-form-item label-width="200px" label="税收分类编码">
        <el-input
          v-model="formData.taxTypeName"
          placeholder="请输入编码"
          clearable
          :style="{ width: '100%' }"
        >
          <i
            slot="suffix"
            @click="openList('税收分类编码')"
            class="el-input__icon el-icon-notebook-2"
            style="cursor: pointer"
          ></i>
        </el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="享受优惠政策">
        <!-- <el-input
          v-model="formData.isPreferential"
          placeholder="请输入编码"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input> -->
        <el-radio v-model="formData.isPreferential" label="1">是</el-radio>
        <el-radio v-model="formData.isPreferential" label="2">否</el-radio>
      </el-form-item>
      <el-form-item label-width="200px" label="税收优惠政策类型">
        <el-input
          v-model="formData.referentialType"
          placeholder="请输入税收优惠政策类型"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input> </el-form-item
      ><el-form-item label-width="200px" label="用于报销">
        <!-- <el-input
          v-model="formData.isReimbursement"
          placeholder="请输入编码"
          clearable
          :style="{ width: '100%' }"
        >
        </el-input> -->
        <el-radio v-model="formData.isReimbursement" label="1">是</el-radio>
        <el-radio v-model="formData.isReimbursement" label="2"
          >否</el-radio
        > </el-form-item
      ><el-form-item label-width="200px" label="分组">
        <el-input
          v-model="formData.groupId"
          placeholder="请输入分组"
          clearable
          :style="{ width: '100%' }"
        >
          <i
            slot="suffix"
            @click="openList('分组')"
            class="el-input__icon el-icon-notebook-2"
            style="cursor: pointer"
          ></i>
        </el-input>
      </el-form-item>

      <el-form-item label-width="200px" label="描述" prop="costDesc">
        <el-input
          v-model="formData.costDesc"
          type="textarea"
          placeholder="请输入描述"
          :autosize="{ minRows: 4, maxRows: 4 }"
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :append-to-body="list"
      width="60%"
    >
      <el-table
        :data="gridData"
        stripe
        border
        style="width: 100%"
        v-if="title == '税率'"
        @row-dblclick="getRow"
      >
        <!-- <el-table-column
                type="selection"
                width="55"
                align="center"
            ></el-table-column> -->
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column prop="rateCode" label="编码">
          <template slot-scope="scope">
            {{ scope.row.rateCode || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称">
          <template slot-scope="scope">
            {{ scope.row.title || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="deptId" label="所属公司">
          <template slot-scope="scope">
            {{ scope.row.deptId || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="税率">
          <template slot-scope="scope">
            {{ scope.row.rate || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="dataStatus" label="数据状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.dataStatus === 1">创建</el-tag>
            <el-tag v-else-if="scope.row.dataStatus === 2">审核中</el-tag>
            <el-tag v-else-if="scope.row.dataStatus === 3">已审核</el-tag>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isAddTax" label="是否增值税">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isAddTax === 1" type="success">是</el-tag>
            <el-tag v-else-if="scope.row.isAddTax === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isBuyReplace" label="买方代扣代缴">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isBuyReplace === 1" type="success"
              >是</el-tag
            >
            <el-tag v-else-if="scope.row.isBuyReplace === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isSellReplace" label="卖方代扣代缴">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isSellReplace === 1" type="success"
              >是</el-tag
            >
            <el-tag v-else-if="scope.row.isSellReplace === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isTaxInvoice" label="是否开增值税发票">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isTaxInvoice === 1" type="success"
              >是</el-tag
            >
            <el-tag v-else-if="scope.row.isTaxInvoice === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="effectiveTime" label="生效日期">
          <template slot-scope="scope">
            {{ scope.row.effectiveTime || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="invalidTime" label="失效日期">
          <template slot-scope="scope">
            {{ scope.row.invalidTime || "--" }}
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="gridData"
        stripe
        border
        style="width: 100%"
        v-if="title == '税收分类编码'"
        @row-dblclick="getRow"
      >
        <!-- <el-table-column
                type="selection"
                width="55"
                align="center"
            ></el-table-column> -->
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column prop="docNo" label="编码">
          <template slot-scope="scope">
            {{ scope.row.docNo || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="taxTypeCode" label="税收分类编码">
          <template slot-scope="scope">
            {{ scope.row.taxTypeCode || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="parentCode" label="上级编码">
          <template slot-scope="scope">
            {{ scope.row.parentCode || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称">
          <template slot-scope="scope">
            {{ scope.row.title || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="simpleTitle" label="简称">
         
        </el-table-column>
        <el-table-column prop="taxDesc" label="说明">
          
        </el-table-column>
        <el-table-column prop="taxRate" label="税率">
          
        </el-table-column>
        <el-table-column prop="preferentialTaxPolicy" label="税收优惠政策内容">
          
        </el-table-column>
      </el-table>
      <!-- <el-table
        :data="gridData"
        stripe
        border
        style="width: 100%"
        v-if="title == '分组'"
        @row-dblclick="getRow"
      > -->
        <!-- <el-table-column
                type="selection"
                width="55"
                align="center"
            ></el-table-column> -->
        <!-- <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column prop="rateCode" label="编码">
          <template slot-scope="scope">
            {{ scope.row.rateCode || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称">
          <template slot-scope="scope">
            {{ scope.row.title || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="deptId" label="所属公司">
          <template slot-scope="scope">
            {{ scope.row.deptId || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="rate" label="税率">
          <template slot-scope="scope">
            {{ scope.row.rate || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="dataStatus" label="数据状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.dataStatus === 1">创建</el-tag>
            <el-tag v-else-if="scope.row.dataStatus === 2">审核中</el-tag>
            <el-tag v-else-if="scope.row.dataStatus === 3">已审核</el-tag>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isAddTax" label="是否增值税">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isAddTax === 1" type="success">是</el-tag>
            <el-tag v-else-if="scope.row.isAddTax === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isBuyReplace" label="买方代扣代缴">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isBuyReplace === 1" type="success"
              >是</el-tag
            >
            <el-tag v-else-if="scope.row.isBuyReplace === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isSellReplace" label="卖方代扣代缴">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isSellReplace === 1" type="success"
              >是</el-tag
            >
            <el-tag v-else-if="scope.row.isSellReplace === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="isTaxInvoice" label="是否开增值税发票">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isTaxInvoice === 1" type="success"
              >是</el-tag
            >
            <el-tag v-else-if="scope.row.isTaxInvoice === 2" type="danger"
              >否</el-tag
            >
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column prop="effectiveTime" label="生效日期">
          <template slot-scope="scope">
            {{ scope.row.effectiveTime || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="invalidTime" label="失效日期">
          <template slot-scope="scope">
            {{ scope.row.invalidTime || "--" }}
          </template>
        </el-table-column>
      </el-table> -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="table-pagination"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
      >
      </el-pagination> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { add } from "@/api/base/data";
import {
  updataKingBaseFeeList,
  editKingBaseFeeList,
  getkingBaseTaxTypeList,
  getKingBaseSupplierGroupList
} from "@/api/bim/outher";
import { getTaxData } from "@/api/base/data";
export default {
  components: {},
  props: ["id"],
  data() {
    return {
      gridData: [],
      list: true,
      title: "",
      dialogVisible: false,
      flag: false,
      formData: {
        costCategory: undefined,
        feeCode: undefined,
        taxRate: undefined,
        title: undefined,
        costDesc: undefined,
        isReimbursement: "1",
        isPreferential: "1",
      },
      rules: {
        costCategory: [
          {
            required: true,
            message: "请输入存货成本类别",
            trigger: "blur",
          },
        ],
        feeCode: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur",
          },
        ],
        taxRate: [
          {
            required: true,
            message: "请输入税率",
            trigger: "blur",
          },
        ],
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        costDesc: [
          {
            required: true,
            message: "请输入描述",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (this.id != "") {
      updataKingBaseFeeList(this.id).then((res) => {
        this.formData = res.data;
        this.flag = true;
      });
    }
  },
  methods: {
    // 点击打开弹窗
    openList(val) {
      this.title = val;
      this.dialogVisible = true;

      if (val == "税率") {
        this.loading = true;
        let params = {
          page: this.page,
          limit: this.limit,
        };
        getTaxData(params).then((res) => {
          this.gridData = res.rows;
          this.total = res.total;
        });
      } else if (val == "税收分类编码") {
        getkingBaseTaxTypeList().then((res) => {
           this.gridData = res.data.records;
          this.total = res.data.total;
        });
      } else if (val == "分组") {
        getKingBaseSupplierGroupList().then((res)=>{
          this.gridData = res.rows;
          this.total = res.total;
          
        })
      }
    },
    // 点击表格
    getRow(row) {
      this.dialogVisible = false;
      if (this.title == "税率") {
        this.formData.taxRate = row.rate;
      }else if (this.title == "税收分类编码") {
        this.formData.taxTypeCode=row.taxTypeCode
        this.formData.taxTypeName=row.title
      } else if (this.title == "分组") {
       tis.formData.groupId=row
      }
    },
    submitForm(cb) {
      if (this.flag) {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          editKingBaseFeeList(this.formData, "KingBaseFee").then((res) => {
            if (res.code === 200) {
              cb();
              this.$message.success("修改成功");
              this.flag = false;
            }
          });
        });
      } else {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          // TODO 提交表单
          add(this.formData, "KingBaseFee").then((res) => {
            if (res.code === 200) {
              cb();
              this.$message.success("新增成功");
            }
          });
        });
      }
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
  },
};
</script>
<style></style>
